<template>
<!-- gmtCreate: "2020-05-19 02:25:52"
id: "001"
idCard: "433127199909035223"
isDeleted: false
name: "孙鹏翔"
page: null
photo: null
profession: "软件技术"
sex: 0
sort: 111
studentId: "201717041233"
uname: "admin24"
  userId: "126112225713" -->
  <el-row :gutter="20">
    <el-col :span="4">
      <div class="grid-content bg-purple">
        <div>&emsp;&emsp;&emsp;</div>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="grid-content bg-purple">

        <h3>课程信息</h3>
        <table class="sss">
          <tr>
            <th>操作</th>
            <th>值</th>
          </tr>
          <tr>
            <td>课程名称</td>
            <td>{{stu.title}}</td>
          </tr>
          <tr>
            <td>所属专业</td>
            <td>{{stu.sname}}</td>
          </tr>
          <tr>
            <td>任课老师</td>
            <td>{{stu.tname}}</td>
          </tr>
          <tr>
            <td>课时</td>
            <td>{{stu.lessonNum}}</td>
          </tr>
          <tr>
            <td>开设时间</td>
            <td>{{stu.gmtCreate}}</td>
          </tr>
          <tr>
            <td>更新时间</td>
            <td>{{stu.gmtModified}}</td>
          </tr>
          <tr>
            <td>课程分封面</td>
            <td>
              <img :src="stu.cover" height="200" width="400" />
            </td>
          </tr>
        </table>
      </div>
      <div class="fg">
        <hr
          style="FILTER: alpha(opacity=100,finishopacity=0,style=3)"
          width="80%"
          color="#987cb9"
          size="3"
        />
      </div>

      <div class="kdu">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="username" label="学生名称" ></el-table-column>
          <el-table-column prop="title" label="专业" ></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
        </el-table>
      </div>
       <div class="buyy"> 
            
                <el-button type="primary"  @click="save">确定选择</el-button>
            
            <router-link :to="'/stuteacher'">
                  <el-button>返回</el-button>
            </router-link>
        </div>
     
    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>

<script>
// import student from "@/api/student";
import course from "@/api/course";
import StudentAndCourse from "@/api/StudentAndCourse";
export default {
  data() {
    return {
      stu:{
        
      },
      tableData:[]
     
    };
  },
  created(){
    this.init()
    
  },
   methods: {
    init() {
      // debugger
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        // debugger
        this.getStu(id);
        this.getCon(id);
      } 
    },
     getStu(id){
       course
        .findById(id)
        .then(response => {
        this.stu= response.data.data
        })

     },
      getCon(id){
        StudentAndCourse.gets(id) 
        .then(response => {
        this.tableData= response.data.data
        })
        
    },
    save(){
     StudentAndCourse.save(this.stu.id) 
        .then(response => {
              this.$router.push({ path: "/stuteacher/list" });
        })
    }
   }
};
</script>


<style>
.sss {
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
  width: 100%;
}
.kdu{
width: 70%;
margin: 0 auto;
}
.fg {
  padding: 30px;
}
.sss th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 40px;
}
.buyy{
    margin: 0 auto;
    width: 200px;
    margin-top:50px ;
}
.sss thead th {
  background-color: #cce8eb;
  width: 100px;
}
.sss tr:nth-child(odd) {
  background: #fff;
}
.sss tr:nth-child(even) {
  background: #f5fafa;
}
.sss td {
  border: 1px solid #cad9ea;
  color: #666;
  height: 30px;
}
</style>